<template>
    <PlayItemTop :playlist='playlist' title="歌单"/>
    <PlayItemContent :playlist='playlist' :music='playMusicList'/>
</template>

<script setup>
import PlayItemTop from './components/PlayItemTop.vue';
import PlayItemContent from './components/PlayItemContent.vue';
import { getPlayItemDetail,getPlaySongDetail } from '@/assets/axios/api';
import { onMounted,ref } from 'vue';
import { useRoute } from 'vue-router'
const route=useRoute()
const playlist=ref({})
const playMusicList=ref({})
onMounted(async()=>{
    let res=await getPlayItemDetail(route.query.id)
    playlist.value=res.data.playlist;
    let ids=playlist.value.trackIds.reduce((cur,old)=>{
        return cur+=old.id+','
    },'').slice(0,-1)
    let respond=await getPlaySongDetail(ids)
    playMusicList.value=respond.data.songs
})
</script>

<style scoped lang="less">
</style>